<script setup>
import { ref } from 'vue'
import { useGetArtInfoService, artDeleteInfoService } from '@/api/article'
import { Delete, Edit } from '@element-plus/icons-vue'
const tableData = ref([])

//加载效果
const isLoading = ref(false)
const getArtInfoService = async () => {
  isLoading.value = true
  const {
    data: { data }
  } = await useGetArtInfoService()
  tableData.value = data
  isLoading.value = false
}
getArtInfoService()

//编辑、添加、删除功能
const dialog = ref()

const deleteArt = (row) => {
  ElMessageBox.confirm('确定删除', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      const { id } = row
      await artDeleteInfoService(id)
      getArtInfoService()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败'
      })
    })
}
const editArt = (row) => {
  dialog.value.showDialog(row)
}
const addArt = () => {
  dialog.value.showDialog({})
}

//成功编辑添加
const onSuccess = () => {
  getArtInfoService()
}
</script>
<template>
  <div class="main1">
    <page-container title="文章分类">
      <template #extra>
        <el-button type="primary" @click="addArt">添加分类</el-button>
      </template>

      <el-table :data="tableData" style="width: 100%" v-loading="isLoading">
        <el-table-column type="index" label="序号" min-width="25%" />
        <el-table-column prop="cate_name" label="分类名称" min-width="25%" />
        <el-table-column prop="cate_alias" label="分类别名" min-width="25%" />
        <el-table-column label="操作" min-width="25%">
          <template #default="{ row }">
            <el-button
              type="primary"
              :icon="Edit"
              circle
              @click="editArt(row)"
            />
            <el-button
              type="danger"
              :icon="Delete"
              circle
              @click="deleteArt(row)"
            />
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无数据" />
        </template>
      </el-table>
      <chanel-edit-dialog
        ref="dialog"
        @success="onSuccess"
      ></chanel-edit-dialog>
    </page-container>
  </div>
</template>
<style scoped lang="scss"></style>
